<template>
  <div class="movie-details-container">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <button @click="goBack" class="back-btn">
        <span>←</span> 返回
      </button>
    </div>

    <!-- 电影信息区域 -->
    <div class="movie-hero">
      <div class="movie-poster-container">
        <img :src="movie.poster" alt="电影海报" class="movie-poster">
      </div>
      
      <div class="movie-info-container">
        <h1 class="movie-title">{{ movie.title }}</h1>
        <div class="movie-meta">
          <span class="meta-item">{{ movie.releaseDate}}</span>
          <span class="meta-item">{{ movie.genre }}</span>
          <span class="meta-item">{{ movie.duration }}分钟</span>
        </div>
        
        <div class="movie-details">
          <div class="detail-item">
            <span class="label">导演：</span>
            <span class="value">{{ movie.director }}</span>
          </div>
          <div class="detail-item">
            <span class="label">主演：</span>
            <span class="value">{{ movie.actors }}</span>
          </div>
          <div class="detail-item">
            <span class="label">上映日期：</span>
            <span class="value">{{ formatDate(movie.releaseDate) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">平均评分：</span>
            <div class="value average-rating-container">
              <span class="average-score">{{ averageScore.toFixed(1) }}</span>
              <span class="score-suffix">分</span>
              <div class="average-rating-stars">
                <span v-for="(star, index) in 5" :key="'avg'+index"
                      :class="{ active: averageScore >= (index + 1) * 2, 'half-active': averageScore >= (index * 2 + 1) && averageScore < (index + 1) * 2 }">★</span>
              </div>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <button
              @click="setFavorite(1)"
              :class="['action-btn', 'want-btn', { active: favoriteType === 1 }]"
          >
            <span class="btn-icon">👀</span>
            <span class="btn-text">想看</span>
          </button>
          <button
              @click="setFavorite(2)"
              :class="['action-btn', 'watched-btn', { active: favoriteType === 2 }]"
          >
            <span class="btn-icon">✅</span>
            <span class="btn-text">看过</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 电影简介 -->
    <div class="movie-description">
      <h3 class="section-title">剧情简介</h3>
      <p class="description-text">{{ movie.description }}</p>
    </div>

    <!-- 评分区域 -->
    <div class="rating-section">
      <h3 class="section-title">我的评分</h3>
      <div class="rating-container">
        <div class="rating-input-wrapper">
          <div class="rating-label">点击星星评分（1-10分）</div>
        <div class="rating-stars-input">
          <span v-for="(star, index) in 10" :key="index" 
                @click="setScore(index + 1)"
                  @mouseover="hoverScore = index + 1"
                  @mouseleave="hoverScore = 0"
                  :class="{ 
                    active: score >= index + 1,
                    hover: hoverScore >= index + 1
                  }"
                  :title="`${index + 1}分`">★</span>
          </div>
        </div>
        <div class="rating-display-text">
          <span class="current-score">{{ score || '未评分' }}</span>
          <span class="score-label">/ 10分</span>
          <span v-if="score > 0" class="score-description">{{ getScoreDescription(score) }}</span>
        </div>
        <button @click="submitRating" class="submit-rating-btn" :disabled="score === 0 || loading">
          {{ loading ? '提交中...' : '提交评分' }}
        </button>
      </div>
    </div>

    <!-- 评论区 -->
    <div class="comments-section">
      <h3 class="section-title">评论区</h3>
      
      <!-- 发表评论 -->
      <div class="comment-form">
        <textarea 
          v-model="newComment" 
          placeholder="写下你的观影感受..."
          class="comment-input"
          rows="3"
        ></textarea>
        <button @click="submitComment" class="submit-comment-btn" :disabled="!newComment.trim() || loading">
          {{ loading ? '发表中...' : '发表评论' }}
        </button>
      </div>

      <!-- 评论列表 -->
      <div class="comments-list">
        <div v-if="comments.length === 0" class="empty-comments">
          <div class="empty-icon">💬</div>
          <div class="empty-text">还没有评论，快来发表第一条评论吧！</div>
        </div>
        
        <div v-else v-for="(comment, index) in comments" :key="index" class="comment-card">
          <div class="comment-header">
            <div class="comment-user">
              <div class="user-avatar" @click="goToUserProfile(comment.userId)" style="cursor: pointer;">
                <img 
                  v-if="comment.userAvatar" 
                  :src="comment.userAvatar" 
                  :alt="comment.username"
                  @error="handleAvatarError"
                  class="user-avatar-img"
                />
                <span v-else class="default-avatar" style="display: flex;">👤</span>
              </div>
              <div class="user-info">
                <div class="username">{{ comment.username || '用户' + comment.userId }}</div>
                <div class="comment-date">{{ formatDate(comment.createdAt) }}</div>
              </div>
            </div>
            <div class="comment-rating" v-if="comment.userRating">
              <span class="rating-text">{{ comment.userRating }}分</span>
              <div class="rating-stars-small">
                <span v-for="(star, index) in 5" :key="'user'+index"
                      :class="{ 
                        active: comment.userRating >= (index + 1) * 2, 
                        'half-active': comment.userRating >= (index * 2 + 1) && comment.userRating < (index + 1) * 2 
                      }">★</span>
              </div>
            </div>
          </div>
          
          <div class="comment-content">
            <p>{{ comment.content }}</p>
          </div>
          
          <div class="comment-footer">
            <button @click="toggleLike(comment)" class="like-btn" :class="{ active: comment.likedByUser }">
              <span class="like-icon">{{ comment.likedByUser ? '❤️' : '🤍' }}</span>
              <span class="like-count">{{ comment.useful || 0 }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { useAuthStore } from '@/store/authStore';

export default {
  data() {
    return {
      movieId: null,
      movie: {},
      comments: [],
      newComment: '',
      score: 0,
      hoverScore: 0,
      averageScore: 0,
      favoriteType: null,
      loading: false
    };
  },
  computed: {
    currentUserId() {
      // 优先从authStore获取，如果没有则使用默认值
      const userId = this.authStore?.user?.id;
      console.log("AuthStore用户ID：", userId, "类型：", typeof userId);
      
      if (userId !== undefined && userId !== null) {
        return Number(userId);
      }
      
      // 如果authStore中没有，尝试从localStorage获取
      const storedUserId = localStorage.getItem('userId');
      if (storedUserId) {
        console.log("从localStorage获取用户ID：", storedUserId);
        return Number(storedUserId);
      }
      
      // 默认用户ID
      console.log("使用默认用户ID：2");
      return 2;
    },
    authStore() {
      return useAuthStore();
    }
  },
  async created() {
    const id = this.$route.params.id;

    if (!id || isNaN(Number(id))) {
      console.error("无效的电影 ID:", id);
      this.$router.push('/');
      return;
    }

    this.movieId = id;
    console.log('电影详情页面初始化，电影ID:', this.movieId, '用户ID:', this.currentUserId);

    try {
      await this.fetchMovie();
      await this.fetchComments();
      await this.fetchRatings();
      await this.loadFavoriteStatus();
    } catch (error) {
      console.error('页面初始化失败:', error);
      // 如果接口失败，至少显示页面结构
    }
  },
  methods: {
    renderStars(score) {
      const fullStars = Math.floor(score);
      const halfStar = score % 1 >= 0.5 ? 1 : 0;
      const emptyStars = 10 - fullStars - halfStar;

      return '★'.repeat(fullStars) + '✬'.repeat(halfStar) + '☆'.repeat(emptyStars);
    },
    async loadFavoriteStatus() {
      try {
        const response = await axios.get(`http://localhost:9527/favorite`, {
          params: {
            userId: this.currentUserId,
            movieId: this.movieId
          }
        });
        this.favoriteType = response.data?.type || null;
        console.log('收藏状态:', this.favoriteType); // 调试用
      } catch (error) {
        console.error('获取收藏状态失败:', error);
        this.favoriteType = null;
      }
    },
    async setFavorite(type) {
      if (this.favoriteType === type) {
        // 取消收藏
        try {
          await axios.delete(`http://localhost:9527/favorite`, {
            params: {
              userId: this.currentUserId,
              movieId: this.movieId
            }
          });
          this.favoriteType = null;
        } catch (error) {
          alert('取消失败');
        }
        return;
      }
      try {
        const response = await axios.post(`http://localhost:9527/favorite`, {
          userId: this.currentUserId,
          movieId: this.movieId,
          type: type
        });
          this.favoriteType = type;
        console.log('收藏状态更新:', this.favoriteType); // 调试用
      } catch (error) {
        console.error('收藏操作失败:', error);
        alert('操作失败');
      }
    },
    fetchMovie() {
      axios.get(`http://localhost:9527/movies/${this.movieId}`).then(response => {
        let movie = response.data;

        if (movie.poster && movie.poster.startsWith('http')) {
          movie.poster = `https://images.weserv.nl/?url=${movie.poster.replace(/^https?:\/\//, '')}`;
        }

        this.movie = movie;
      }).catch(error => {
        console.error('获取电影详情失败:', error);
        console.error('错误详情:', error.response?.data);
      });
    },
    async fetchComments() {
      try {
        const response = await axios.get(`http://localhost:9527/commentss/movie/${this.movieId}`, {
          params: {
            currentUserId: this.currentUserId
          }
        });
        this.comments = response.data.map(item => {
          const comment = item.comment;
          const rating = item.rating;

          // 确保正确设置点赞状态
          comment.likedByUser = item.likedByUser || false;
          comment.userRating = rating ? rating.score : null;

          return comment;
        });
      } catch (error) {
        console.error("获取评论失败", error);
        console.error('错误详情:', error.response?.data);
        this.comments = [];
      }
    },
    submitComment() {
      if (this.newComment.trim() === '') return;
      
      this.loading = true;
      const comment = {
        content: this.newComment,
        userId: this.currentUserId
      };
      
      axios.post(`http://localhost:9527/movie/${this.movieId}/comment`, comment)
        .then(() => {
          this.newComment = '';
          this.fetchComments();
          // 显示成功提示
          this.$message?.success?.('评论发表成功！') || alert('评论发表成功！');
        })
        .catch(error => {
          console.error('发表评论失败:', error);
          this.$message?.error?.('评论发表失败，请重试') || alert('评论发表失败，请重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    fetchRatings() {
      axios.get(`http://localhost:9527/movie/${this.movieId}/ratings`).then(response => {
        console.log("评分数据：", response.data);
        console.log("当前用户ID：", this.currentUserId, "类型：", typeof this.currentUserId);
        
        const ratings = Array.isArray(response.data) ? response.data : [];
        console.log("评分数组：", ratings);

        // 确保类型匹配，转换为数字进行比较
        const currentUserIdNum = Number(this.currentUserId);
        const currentUserRating = ratings.find(rating => {
          const ratingUserId = Number(rating.userId);
          console.log(`比较：${ratingUserId} === ${currentUserIdNum}`, ratingUserId === currentUserIdNum);
          return ratingUserId === currentUserIdNum;
        });

        console.log("找到的当前用户评分：", currentUserRating);

        if (currentUserRating) {
          this.score = Number(currentUserRating.score);
          console.log("设置评分：", this.score);
        } else {
          this.score = 0;
          console.log("未找到评分，设置为0");
        }

        if (ratings.length > 0) {
          this.averageScore = ratings.reduce((acc, cur) => acc + Number(cur.score), 0) / ratings.length;
        } else {
          this.averageScore = 0;
        }
        
        console.log("最终评分状态：", this.score, "平均分：", this.averageScore);
      }).catch(error => {
        console.error('获取评分失败:', error);
        console.error('错误详情:', error.response?.data);
        this.score = 0;
        this.averageScore = 0;
      });
    },
    setScore(score) {
      this.score = score;
    },
    submitRating() {
      if (this.score === 0) return;
      
      this.loading = true;
      const rating = {
        score: this.score,
        userId: this.currentUserId
      };
      
      console.log("提交评分：", rating);
      
      axios.post(`http://localhost:9527/movie/${this.movieId}/rating`, rating)
        .then((response) => {
          console.log("评分提交成功，响应：", response.data);
          // 立即更新本地状态，不等待重新获取
          this.$message?.success?.('评分提交成功！') || alert('评分提交成功！');
          // 延迟一下再重新获取数据，确保后端数据已更新
          setTimeout(() => {
            this.fetchRatings();
          }, 500);
        })
        .catch(error => {
          console.error('提交评分失败:', error);
          this.$message?.error?.('评分提交失败，请重试') || alert('评分提交失败，请重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    toggleLike(comment) {
      const userId = this.currentUserId;

      axios.post(`http://localhost:9527/commentss/${comment.id}/like`, {
        userId: userId
      }).then(res => {
        const response = res.data;
        comment.useful = response.useful;
        comment.likedByUser = response.likedByUser;
      }).catch(err => {
        alert("点赞失败，请重试");
        console.error("点赞失败：", err);
      });
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
    },
    handleAvatarError(event) {
      // 头像加载失败时，隐藏图片，显示默认头像
      event.target.style.display = 'none';
      const avatarContainer = event.target.parentElement;
      const defaultAvatar = avatarContainer.querySelector('.default-avatar');
      if (defaultAvatar) {
        defaultAvatar.style.display = 'flex';
      }
    },
    getScoreDescription(score) {
      const descriptions = {
        1: '很差',
        2: '较差', 
        3: '不好',
        4: '一般',
        5: '还行',
        6: '不错',
        7: '很好',
        8: '非常好',
        9: '优秀',
        10: '完美'
      };
      return descriptions[score] || '';
    },
    goToUserProfile(userId) {
      this.$router.push(`/user/${userId}`);
    },
    goBack() {
      // 获取来源页面信息
      const from = this.$route.query.from;
      
      // 根据来源页面决定返回路径
      if (from) {
        switch (from) {
          case 'movies':
            this.$router.push('/home?activeMenu=movies');
            break;
          case 'reviews':
            this.$router.push('/home?activeMenu=reviews');
            break;
          case 'annual':
            this.$router.push('/annual');
            break;
          case 'search':
            this.$router.push('/searchMovie');
            break;
          case 'profile':
            this.$router.push('/profile');
            break;
          case 'my-reviews':
            this.$router.push('/my-reviews');
            break;
          case 'my-watchlist':
            this.$router.push('/my-watchlist');
            break;
          case 'more-rank':
            // 从更多电影页面来的，需要返回更多电影页面
            const rankName = this.$route.query.rankName;
            if (rankName) {
              this.$router.push(`/more-rank/${rankName}`);
            } else {
              this.$router.go(-1);
            }
            break;
          case 'user-profile':
            // 从用户主页来的，需要返回用户主页
            const userId = this.$route.query.userId;
            if (userId) {
              this.$router.push(`/user/${userId}`);
            } else {
              this.$router.go(-1);
            }
            break;
          default:
            // 如果没有明确的来源信息，尝试返回上一页
            this.$router.go(-1);
        }
      } else {
        // 如果没有来源信息，默认返回到选电影页面
        this.$router.push('/home?activeMenu=movies');
      }
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.movie-details-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 顶部导航栏 */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.back-btn {
  background: none;
  border: none;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(-2px);
}

/* 电影信息区域 */
.movie-hero {
  display: flex;
  gap: 40px;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.movie-poster-container {
  position: relative;
  flex-shrink: 0;
}

.movie-poster {
  width: 300px;
  height: 450px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.movie-poster:hover {
  transform: scale(1.02);
}



.movie-info-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.movie-title {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.2;
}

.movie-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.meta-item {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.movie-details {
  margin-bottom: 32px;
}

.detail-item {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.label {
  color: #666;
  font-weight: 500;
  min-width: 80px;
  margin-right: 12px;
}

.value {
  color: #333;
  flex: 1;
}

.average-rating-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.average-score {
  font-size: 18px;
  font-weight: bold;
  color: #ff6b35;
}

.score-suffix {
  color: #666;
  font-size: 14px;
}

.average-rating-stars {
  display: flex;
  gap: 2px;
}

.average-rating-stars span {
  font-size: 16px;
  color: #ddd;
}

.average-rating-stars span.active {
  color: #ffd700;
}

.average-rating-stars span.half-active {
  background: linear-gradient(90deg, #ffd700 50%, #ddd 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.action-buttons {
  display: flex;
  gap: 16px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 2px solid #667eea;
  border-radius: 25px;
  background: transparent;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.action-btn.active {
  background: #667eea;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-icon {
  font-size: 18px;
}

/* 内容区域 */
.movie-description,
.rating-section,
.comments-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 32px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2px;
}

.description-text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

/* 评分区域 */
.rating-container {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.rating-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rating-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.rating-stars-input {
  display: flex;
  gap: 4px;
}

.rating-stars-input span {
  font-size: 28px;
  color: #ddd;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.rating-stars-input span:hover {
  color: #ffd700;
  transform: scale(1.1);
}

.rating-stars-input span.active {
  color: #ffd700;
}

.rating-stars-input span.hover {
  color: #ffed4e;
}

.rating-display-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.current-score {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b35;
}

.score-label {
  color: #666;
  font-size: 14px;
}

.score-description {
  font-size: 14px;
  color: #667eea;
  font-weight: 500;
  background: rgba(102, 126, 234, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  margin-top: 4px;
}

.submit-rating-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-rating-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.submit-rating-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 加载动画 */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.submit-rating-btn:disabled,
.submit-comment-btn:disabled {
  animation: pulse 1.5s infinite;
}

/* 评论区 */
.comment-form {
  margin-bottom: 32px;
}

.comment-input {
  width: 100%;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.3s ease;
  margin-bottom: 16px;
}

.comment-input:focus {
  outline: none;
  border-color: #667eea;
}

.submit-comment-btn {
  background: linear-gradient(45deg, #67c23a, #85ce61);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-comment-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(103, 194, 58, 0.3);
}

.submit-comment-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 评论列表 */
.empty-comments {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
}

.comment-card {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.comment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow: hidden;
  position: relative;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.default-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  font-size: 18px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.comment-date {
  color: #999;
  font-size: 12px;
}

.comment-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-text {
  font-weight: 600;
  color: #ff6b35;
  font-size: 14px;
}

.rating-stars-small {
  display: flex;
  gap: 1px;
}

.rating-stars-small span {
  font-size: 12px;
  color: #ddd;
}

.rating-stars-small span.active {
  color: #ffd700;
}

.rating-stars-small span.half-active {
  background: linear-gradient(90deg, #ffd700 50%, #ddd 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.comment-content {
  margin-bottom: 16px;
}

.comment-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.comment-footer {
  display: flex;
  justify-content: flex-end;
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.like-btn:hover {
  background: rgba(255, 107, 53, 0.1);
  color: #ff6b35;
}

.like-btn.active {
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.1);
}

.like-icon {
  font-size: 16px;
}

.like-count {
  font-size: 14px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .movie-hero {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
  }
  
  .movie-poster {
    width: 100%;
    max-width: 250px;
    height: auto;
    margin: 0 auto;
  }
  
  .movie-title {
    font-size: 28px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .rating-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .rating-stars-input span {
    font-size: 24px;
  }
  
  .average-rating-container {
    flex-wrap: wrap;
  }
  
  .comment-header {
    flex-direction: column;
    gap: 12px;
  }
}
</style>
